@import "../../less/var.less";
@h:100rpx;
.user-article-box{
    overflow-x: hidden;
}
.change-btn{
    @b:6rpx;
    display: flex;
    flex-flow: row nowrap;
    font-size: 32rpx;
    color: @dark;
    box-shadow: 0rpx 2rpx 8rpx #888888;
    background-color: white;
    position: fixed;
    top: 0rpx;
    left: 0rpx;
    width: 100%;
    z-index: 999;
    >view{
        height: @h;
        line-height: @h - @b;
        flex-grow: 1;
        text-align: center;
        border-bottom: @b solid white;
        box-sizing: border-box;
        &.active{
            border-bottom-color: @red;
        }
        &:not(:last-child)::after{
            content: "|";
            float: right;
            color: @gray;
        }
    }
}
.list{
    padding: 20rpx;
    margin-top: @h;
    .item{
        background-color: white;
        border-radius: 12rpx;
        box-shadow: 0rpx 2rpx 8rpx #888888;
        font-size: 24rpx;
        color: @gray-dark;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 20rpx;
    }
    .detail{
        padding: 20rpx;
        border-bottom: 2rpx solid #cccccc;
        .tip{
            font-size: 28rpx;
            color: black;
            padding-bottom: 10rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-right: 200rpx;
            position: relative;
            text:last-child{
                position: absolute;
                top: 0rpx;
                right: 0rpx;
                color: @red;
                font-weight: bold;
                width: 160rpx;
                text-align: right;
            }
            text:last-child.close{
                color: @gray;
            }
        }
        .info{
            text-indent: 60rpx;
            line-height: 40rpx;
            height: 40rpx * 2;
            overflow: hidden;
            margin-bottom: 10rpx;
        }
    }
    .img-box{
        width: 100%;
        white-space: nowrap;
        view{
            width: 200rpx;
            height: 140rpx;
            display: inline-block;
            box-sizing: border-box;
            image{
                width: 100%;
                height: 100%;
            }
        }
    }
    .btn-group{
        padding: 20rpx;
        white-space: nowrap;
        &::after{
            content: "";
            display: block;
            height: 0rpx;
            clear: both;
        }
        .time{
            color: @gray;
            font-size: 24rpx;
            float: left;
        }
        .iconfont{
            font-size: 28rpx;
            float: right;
            padding-left: 20rpx;
        }
        .iconfont.orange{
            color: @orange;
        }
        .iconfont.blue{
            color: @blue;
        }
        .iconfont.purple{
            color: @purple;
        }
    }
}